<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item>
          <el-date-picker
            v-model="date"
            type="daterange"
            range-separator="to"
            start-placeholder="开始时间"
            end-placeholder="结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="commitData">{{$t('message.confirm')}}</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <!--列表-->
    <el-table
      :data="tableData"
      v-loading="tableDataLoading"
      style="width: 100%">
      <el-table-column
        prop="asset"
        label="币种">
      </el-table-column>
      <el-table-column
        prop="balance"
        label="余额">
      </el-table-column>
      <el-table-column
        prop="principal"
        label="初始资金">
      </el-table-column>
      <el-table-column
        prop="pl"
        label="收益">
      </el-table-column>
      <el-table-column
        prop="change"
        label="期间变动">
      </el-table-column>
      <el-table-column
        prop="adjust"
        label="期间调整">
      </el-table-column>
    </el-table>
  </section>
</template>

<script>
import { autoCount } from '../api/api'

export default {
  data () {
    return {
      date: '',
      tableData: [],
      tableDataLoading: false
    }
  },
  created () {
  },
  methods: {
    getData (startTime, endTime) {
      this.tableDataLoading = true
      autoCount({startTime, endTime}).then((res) => {
        if (res.data.code && res.data.code !== 0) {
          this.$message.error('获取失败')
        }
        this.tableData = res.data.result
        this.tableDataLoading = false
      }).catch((res) => {
        console.log(res)
      })
    },
    commitData () {
      let date = this.date
      if (date === '') {
        this.$message.error('请选择时间')
      } else {
        this.getData(date[0].getTime() / 1000, date[1].getTime() / 1000)
      }
    }
  },
  computed: {
    unit () {
      return this.value
    }
  },
  mounted () {

  }
}

</script>

<style scoped lang="scss">
  .pagination {
    overflow: hidden;
    margin-top: 20px;
    div {
      float: right;
      width: 400px;
    }
  }
 .item {
   display: flex;
   justify-content: space-between;
 }
</style>
